<template>
  <div style="height: 100%">
    <div style="width: 49%;float: left;height: 100%;">
      <el-card style="border-radius: 10px;height: 100%">
        <p style="text-align: center;font-size: 35px;font-weight: 500">我 的 信 息</p>
        <p style="text-align: center;font-size: 35px;font-weight: 300;margin-top: 100px">用 户 名： {{ info.username }}</p>
        <p style="text-align: center;font-size: 35px;font-weight: 300;margin-top: 30px">邮 箱： {{ info.email }}</p>
      </el-card>
    </div>
    <div style="width: 49%;float: right;height: 100%;">
      <el-card style="border-radius: 10px;height: 100%">
        <p style="text-align: center;font-size: 35px;font-weight: 500">修 改 密 码</p>
        <el-form :rules="rules" :model="form">
          <el-form-item prop="old">
            <el-input type="password" v-model="form.old" placeholder="请输入旧密码"></el-input>
          </el-form-item>
          <el-form-item prop="new">
            <el-input type="password" v-model="form.new" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item prop="repass">
            <el-input type="password" v-model="form.repass" placeholder="请再输入一次"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain style="width: 100%" @click="changePass">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "MyInformation",
  data() {
    var checkOldPass = (rule, value, callback) => {
            axios.get('http://localhost:8080/user/' + this.info.username + "/" + value)
                .then(data => {
                    if (data.data.code == 1) {
                        callback();
                    } else {
                        callback(new Error("请输入正确的原密码！"));
                    }
                }).catch();
        };
        var checkNewPass = (rule, value, callback) => {
            if (value != this.form.new) {
                callback(new Error("两次输入密码不一致！"));
            }
            callback();
        };
    return {
      info: {},
      form: {
        old: "",
        new: "",
        repass: ""
      },
      rules: {
        old: [
          { required: true, message: '请输入旧密码', trigger: 'blur', },
          {
            validator: checkOldPass,
            trigger: 'blur'
          }
        ],
        new: [
          { required: true, message: '请输入新密码', trigger: 'blur', },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur',
          },

        ],
        repass: [
          { required: true, message: '请确认新密码', trigger: 'blur', },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur',
          },
          {
            validator: checkNewPass,
            trigger: 'blur'
          }
        ],
      },

    }
  },
  methods: {
    changePass() {
      axios.post('http://localhost:8080/user/update/' + this.form.new + "/" + this.info.id)
        .then(data =>{
          if (data.data.code == 1) {
            this.$notify.success("修改成功，重新登录");
            this.$router.push('/');
          } else {
            this.$notify.error("修改失败，请重新输入");
          }
        }).catch();
      this.form.old = "";
      this.form.new = "";
      this.form.repass = "";
    }
  },
  mounted() {
    this.info = JSON.parse(window.localStorage.user);
  }
}
</script>

<style scoped>
</style>
